<template>
  <div>
    <div class="choose clearfix">
      <h1 class="fl">我的订单列表</h1>
      <div class="orderType fr">
        <template>
          <el-select v-model="search.type" placeholder="请选择" @change="getOrdersByClass">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </div>
      <strong class="fr order-span">选择订单类型:</strong>
    </div>

    <div class="order-table">
      <template>
        <el-table :data=" myOrderPageData.data" border style="width: 100%" class="orders-table">
          <el-table-column fixed prop="_id" label="订单编号" width="280"></el-table-column>
          <el-table-column prop="productsId.name" label="购买产品名称" width="200"></el-table-column>
          <el-table-column prop="salesmanId.userName" label="销售员" width="160"></el-table-column>
          <el-table-column prop="usersId.userName" label="购买者" width="160"></el-table-column>
          <el-table-column label="购买时间" width="190">
            <template slot-scope="scope">
              <span v-if="scope.row.time">{{scope.row.time}}</span>
              <span v-else>2020年9月21日 13:00</span>
            </template>
          </el-table-column>
          <el-table-column label="订单详情" width="140">
            <template slot-scope="scope">
              <el-button type="warning" @click="toOrderDetail(scope.row._id)" class="fl">订单详情</el-button>
            </template>
          </el-table-column>
          <el-table-column label="订单删除" width="140" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="open(scope.row._id)"
                class="mofifybtn"
                v-if="(scope.row.state==3||scope.row.state==7)"
                :key="scope.row._id"
              >删除</el-button>
              <el-button
                type="text"
                class="mofifybtn"
                v-else
                :key="scope.row._id"
                style="color: #f10000;"
              >不可删除</el-button>
            </template>
          </el-table-column>

          <!-- 产品修改的弹框 -->
        </el-table>
      </template>
    </div>

    <div class="block orders-page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="myOrderPageData.currentPage-0"
        :page-sizes="[3, 4, 5]"
        :page-size="myOrderPageData.pgeSize-0"
        layout="total, sizes, prev, pager, next, jumper"
        :total="myOrderPageData.total-0"
      ></el-pagination>
    </div>
  </div>
</template>
    

<script>
import { createNamespacedHelpers } from "vuex";
import api from "../../../network/apis/api";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "orders"
);
export default {
  data() {
    return {
      search: {
        type: "all",
        _id: "",
      },
      options: [
        {
          value: "all",
          label: "所有",
        },
        {
          value: "waitPay",
          label: "待支付",
        },
        {
          value: "payed",
          label: "已支付",
        },
        {
          value: "valid",
          label: "已生效",
        },
        {
          value: "invalid",
          label: "已失效",
        },
        {
          value: "claims",
          label: "理赔中",
        },
        {
          value: "claimSuccess",
          label: "理赔成功",
        },
        {
          value: "refound",
          label: "退款中",
        },
        {
          value: "refoundSuccess",
          label: "退款成功",
        },
      ],

      //弹框数据
      dialogVisible: false,
    };
  },
  created() {
    this.getMyOrderPage();
  },
  computed: {
    ...mapState(["myOrderPageData"]),
  },

  methods: {
    ...mapActions(["getSalesmanOrder"]),

    //从本地获得销售员的id
    getSalesmansId() {
      const _id = localStorage.getItem("_id");
      this.search._id = _id;
    },

    //页面初始化
    async getMyOrderPage() {
      this.getSalesmansId();
      await this.getSalesmanOrder(this.search);
    },

    //改变页面显示条数
    handleSizeChange(val) {
      this.myOrderPageData.pageSize = val;
      this.getSalesmanOrder(this.search);
    },

    //修改当前页
    handleCurrentChange(val) {
      this.myOrderPageData.currentPage = val;
      this.getSalesmanOrder(this.search);
    },

    //根据订单的分类显示订单
    async getOrdersByClass() {
      this.getSalesmansId();
      await this.getSalesmanOrder(this.search);
    },

    //跳到订单详情页面
    toOrderDetail(_id) {
      this.$router.push("/salesman/updateOrder/" + _id);
    },

    //删除订单
    open(_id) {
      console.log(_id);
      this.$confirm("是否确认修改", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await api.orders.deleteOneOrderById({ _id });
          if (data.status) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //弹框自带效果
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped >
.orders-page {
  margin-top: 30px;
}
.orders-table {
  margin-top: 30px;
}
.order-span {
  margin-top: 10px;
  margin-right: 20px;
}
</style>